<template>
	<view class="page content-20 page-bg">
		<view class="form-wrap">
			<view class="form-group form-group__text">
				<textarea class="form-group__from" v-model="formData.content" :placeholder="placeholder" placeholder-class="placeholder-class" />
			</view>
		</view>
		
		<view class="form-wrap">
			<view class="form-group form-group__upload">
				<view class="form-group__title">相关截图</view>
				<view class="form-group__con">
					<u-upload :action="action" @on-uploaded="onUploaded"></u-upload>
				</view>
			</view>
		</view>
		<view class="form-wrap">
			<view class="form-group">
				<view class="form-group__title">联系电话</view>
				<view class="form-group__con">
					<input class="form-group__from" v-model="formData.phoneNumber" type="number" placeholder="选填" placeholder-class="placeholder-class" />
				</view>
			</view>
		</view>
		<view class="circular-submit" @click="formSubmit">立即提交</view>
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
			return {
				placeholder: '说说你遇到的问题',
				action: common.apiHost + common.uploadPath,
				fileList: [],
				
				formData: {
					msgType: 3,
					content: '',
					phoneNumber: '',
					imgArray: ''
				}
			}
		},
		
		methods: {
			// 图片上传
			onUploaded(res) {
				const that = this
				res = res || []
				let temp = []
				if(res.length > 0) {
					res.map(item => {
						let imgPath = item.response.result.result
						temp.push(imgPath)
					})
				}
				that.fileList = temp
				this.formData.imgArray = temp.join(',')
			},
			
			formSubmit() {
				let that = this
				let formData = this.formData
				if(!formData.content) { this.$showToast('请填写内容~'); return false }
				// if(!formData.imgArray) { this.$showToast('请上传相关图片~'); return false }
				api.saveMessage(formData, res => {
					this.$showToast('您的意见已提交成功, 感谢您的支持~')
					setTimeout(() => {
						that.$link('/pages/mine/mine')
					}, 2000)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.header-bg {
		width: 100%;
	}
	.ql-container {
		padding: 20upx 0;
		height: 250upx;
		box-sizing: border-box;
		min-height: initial;
	}

	.form-group__upload {
		border-bottom: 1px solid $border-color !important;
	}

	.record {
		text-align: center;
		font-weight: bold;
		color: $theme-color;
		@include flex-base;
		justify-content: center;
		margin-top: 50upx;
	}
	.form-wrap{
		margin-bottom: 20upx;
	}
</style>
